import React, { Component } from 'react';
import { connect } from 'dva';
import { Input, Button, DatePicker, notification, Form, Row } from 'antd';
import moment from 'moment'
import styles from '../Apply.less';
import Link from 'umi/link';
import Imgviewer from '@/components/ImgViewer/index';

interface Props {
  form: any,
  dict?: any,
  dispatch?: Function,
  initCurrent: Function,
  img: {
    url: string,
    message: string,
  }
}

@connect(({ record, upload }) => ({
  img: upload.imgValue
}))
class ApplyS extends Component<Props, any> {
  state = {
    show: true
  }

  closeTips = () => {
    this.setState({
      show: !this.state.show
    });
  }

  submit = (e) => {
    e.preventDefault();
    const { form, dispatch, img } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const { date, contractName, note, contractPhone } = values;
        const value = {
          contractName,
          contractPhone,
          note,
          attachList: [img.url],
          startTime: moment(date[0]).format("YYYY-MM-DD") + ' 00:00:00',
          endTime: moment(date[1]).format("YYYY-MM-DD") + ' 23:59:59'
        }
        dispatch({type: 'record/querySubmitFireRecord', payload: value})
      } else {
        notification['error']({
          message: `提交失败`,
          description: '字段验证不通过',
        });
      }
    })
  }

  uploadImage(e) {
    e.persist();
    const { dispatch } = this.props;
    const file = e.target.files[0];
    dispatch({ type: 'upload/uploadImg', payload: file });
  }

  render() {
    const { TextArea } = Input;
    const FormItem = Form.Item;
    const { RangePicker } = DatePicker;
    const { form, img } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form className={styles.applyMain}>
        <p className={styles.applyTips}>报备申请单</p>
        <Row>
          <FormItem
            {...formItemLayout}
            label='联系人姓名'
          >
            {getFieldDecorator('contractName',{
              rules: [{ required: true, message: '请输入联系人姓名' }],
            })(
              <Input placeholder='联系人姓名' />
            )}
          </FormItem>
        </Row>
        <Row>
          <FormItem
            {...formItemLayout}
            label='联系人电话'
          >
            {getFieldDecorator('contractPhone',{
              rules: [{ required: true, message: '请输入联系人电话' }],
            })(
              <Input placeholder='联系人电话' />
            )}
          </FormItem>
        </Row>
        <Row>
          <FormItem
            {...formItemLayout}
            label='报备期限'
          >
            {getFieldDecorator('date',{
              rules: [{ required: true, message: '请输入报备期限' }],
            })(
              <RangePicker />
            )}
          </FormItem>
        </Row>
        <Row>
          <FormItem
            {...formItemLayout}
            label='报备内容'
          >
            {getFieldDecorator('note',{
              rules: [{ required: true, message: '请输入报备内容' }],
            })(
              <TextArea style={{ height: '120px', resize: 'none' }} rows={4} />
            )}
          </FormItem>
        </Row>
        <Row>
          <FormItem
            {...formItemLayout}
            label='上传附件'
          >
            {getFieldDecorator('attach', {
              rules: [{ required: true, message: '上传附件' }]
            })(
              <section className={styles.applyInput}>
                <Button className={styles.applyBtn}>
                  选择附件图片
                </Button>
                <input onChange={(e) => { this.uploadImage(e) }} className={styles.chooseImage} type='file' accept="image/*" />
                <Imgviewer hasText="查看图片" missText="暂无图片" url={img.url}/>
                { img.message === 'success' ? '上传成功' : (img.message === 'fail' ? '上传失败' : '') }
              </section>
            )}
          </FormItem>
        </Row>
        <Row>
          <div className={styles.applyLittletips}>
            <span>上传报备申请单盖章扫描件或者照片</span>
          </div>
        </Row>
        <section className={styles.applyTwobtn}>
          <Button onClick={this.submit}>提交</Button>
          <Link to='/data/record'>
            <Button className={styles.applyBtn}>取消</Button>
          </Link>
        </section>
      </Form>
    )
  }
}

const Apply = Form.create()(ApplyS);
export default Apply;
